<template>
  <div class="LocationView brr bgcFFF boxShadow">
    <div class="left">
      <p class="title">库区选择</p>
      <el-select v-model="wearhouseValue" placeholder="请选择" @change="selectChange">
        <el-option
          v-for="item in wearhouseList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <div class="list" v-loading="loading">
        <el-input v-model.trim="searchInput" placeholder="请输入内容" suffix-icon="el-icon-search" @input="serchInput"></el-input>
        <el-empty
          v-if="!areaList.length"
          image-size="0"
          description="暂无库区"
          class="elEmpty"
        >
        <el-button type="success" @click="$router.push('/manage-base-info/area')" round>新增库区</el-button>
        </el-empty>
        <div class="item">
          <el-radio
            v-for="item in areaList"
            :key="item.id"
            v-model="clickValue"
            :label="item.id"
            border
            @input="getLocation"
          >
            <template>{{ item.name }}</template>
          </el-radio>
        </div>
      </div>
    </div>
    <div class="right" v-loading="infoLoading">
      <div class="topBar">
        <div class="title">库区总览</div>
        <div class="totalText">
          <div class="total mr">库存总计：{{ sataus.total }}</div>
          <div class="stop mr"><span></span>停用库位：{{ sataus.stop }}</div>
          <div class="usering mr"><span></span>占用库位：{{ sataus.use }}</div>
          <div class="free mr"><span></span>空闲库位：{{ sataus.free}}</div>
        </div>
      </div>
      <el-empty
        v-if="!locationList.length"
        :image="$store.state.emptyImage"
        description="暂无库位"
        class="elEmpty"
      >
      <el-button type="success" @click="$router.push('/manage-base-info/location')" round>新增库位</el-button>
      </el-empty>
      <div class="info" v-else>
        <el-popover
          v-for="item in locationList"
          :key="item.id"
          class="wearhouseInfoItem"
          placement="bottom"
          width="150"
          trigger="hover"
        >
          <template>
            <div class="popoInfo">
              <div class="row">
                <div class="col left">库位编号：</div>
                <div class="col right">{{ item.areaCode }}</div>
              </div>
              <div class="row">
                <div class="col left">库位名称：</div>
                <div class="col right">{{ item. name}}</div>
              </div>
              <div class="row">
                <div class="col left">库位位置：</div>
                <div class="col right">{{ item.locationRow }}排{{ item.locationColumn }}列{{ item.locationLayer }}层</div>
              </div>
              <div class="row">
                <div class="col left">库位状态:</div>
                <div class="col right">{{ warehouseStatus(item.status) }}</div>
              </div>
              <div class="row">
                <div class="col left">货品名称:</div>
                <div class="col right">{{ item.goodsName }}</div>
              </div>
              <div class="row">
                <div class="col left">货品数量:</div>
                <div class="col right">{{ item.goodsTotal }}</div>
              </div>
            </div>
          </template>
          <template #reference>
            <div class="infoItem" :class="item.status !== 0 ? item.useStatus !== 0 ? 'usering' :'free': ''"></div>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import { getWearhouseList } from '@/api/warehouse'
import { getAreaAll, getOverviewArear } from '@/api/area'
import { getListDetail } from '@/api/location'
import { warehouseStatus } from '@/constant/warehouse'
export default {
  data () {
    return {
      loading: false,
      infoLoading: false,
      wearhouseList: [],
      wearhouseValue: '',
      searchInput: '',
      clickValue: '',
      areaList: [],
      areaListTemp: [],
      locationList: [],
      sataus: {
        total: 0,
        stop: 0,
        use: 0,
        free: 0
      },
      serchInputTimeOut: null
    }
  },
  created () {
    this.initialization()
  },
  methods: {
    serchInput () {
      if (this.serchInputTimeOut !== null) clearTimeout(this.serchInputTimeOut)
      this.serchInputTimeOut = setTimeout(() => {
        console.log(this.searchInput)
        if (this.searchInput.length === 0) {
          this.steAreaList(this.areaListTemp)
        } else {
          const res = this.areaListTemp.filter(item => item.name.indexOf(this.searchInput) !== -1)
          console.log(res)
          if (this.clickValue !== res[0]?.id && res.length) this.getLocation()
          this.steAreaList(res)
        }
      }, 500)
    },
    warehouseStatus (type) {
      return warehouseStatus.find((item) => item.type === type)?.status || '未知'
    },
    steAreaList (arr = []) {
      console.log(arr)
      this.areaList = []
      arr.forEach((item, index) => {
        this.$set(this.areaList, index, item)
      })
      this.clickValue = this.areaList[0]?.id || ''
    },
    async initialization () {
      this.loading = true
      this.infoLoading = true
      const {
        data: { data }
      } = await getWearhouseList({ status: 1 })
      console.log(data)
      this.wearhouseList = data
      this.wearhouseValue = data[0]?.id || ''
      this.getAreaAll()
    },
    selectChange () {
      this.searchInput = ''
      this.getAreaAll()
    },
    async getAreaAll () {
      this.loading = true
      this.infoLoading = true
      const {
        data: { data }
      } = await getAreaAll({
        warehouseId: this.wearhouseValue,
        status: 1
      })
      console.log(data)
      this.areaListTemp = data
      this.steAreaList(data)
      this.loading = false
      this.getLocation()
    },
    async getLocation () {
      this.infoLoading = true
      const { data } = await getListDetail({ areaId: this.clickValue })
      console.log(data)
      this.locationList = data.data
      console.log(this.clickValue)
      if (this.clickValue !== '') {
        const { data: { data: overview } } = await getOverviewArear(this.clickValue)
        console.log(overview)
        this.sataus = overview
      } else {
        this.sataus = {
          total: 0,
          stop: 0,
          use: 0,
          free: 0
        }
      }
      this.infoLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.LocationView {
  display: flex;
  height: calc(100vh - 114px);
  overflow: hidden;
  .left {
    display: flex;
    flex-direction: column;
    width: 236px;
    box-shadow: -7px 0 15px 0px;
    .title {
      margin: 0 0 22px 10px;
      font-size: 16px;
    }
    .el-select {
      width: 100%;
    }
    .list {
      flex: 1;
      margin-top: 20px;
      padding: 30px 29px 0 26px;
      background: #fdfcf9;
      border: 1px solid #f7f2f1;
      border-radius: 6px;
      .item {
        height: calc(100vh - 330px);
        padding: 0 4px;
        overflow: overlay;
        .el-radio {
          width: 100%;
          text-align: center;
          margin: 20px 0 0 0;
          box-shadow: 0 0 6px 0 rgb(255 178 0 / 40%);
          border: none;
          color: #ffb200;
          ::v-deep .el-radio__input {
            display: none;
          }
          &.is-checked {
            background: #ffb200;
            ::v-deep .el-radio__label {
              color: #332929;
            }
          }
        }
      }
    }
  }
  .right {
    .topBar {
      display: flex;
      .title {
        margin-right: 103px;
      }
      .totalText {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-bottom: 21px;
        .mr {
          display: flex;
          align-items: center;
          margin-right: 43px;
          span {
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 3px;
            margin-right: 7px;
            background-color: #c3c3c3;
          }
          &.usering span {
            background-color: #00be76;
          }
          &.free span {
            background-color: #b2dccc;
          }
        }
      }
    }
    .info {
      .wearhouseInfoItem {
        .infoItem {
          background-color: #c3c3c3;
          display: inline-block;
          width: 36px;
          height: 36px;
          border-radius: 7px;
          margin: 0 12px 10px 0;
          &.usering {
            background-color: #00be76;
          }
          &.free {
            background-color: #b2dccc;
          }
        }
      }
    }
  }
  .left,
  .right {
    padding: 27px 20px;
  }
}
.popoInfo .row {
  display: flex;
  .col {
    &.left {
      width: 5em;
    }
    &.right {
      flex: 1;
    }
  }
}
</style>
